.signal { border: 8px solid transparent; border-radius: 100%; margin: 0 auto; }

.dot { height: 30px; width: 30px; background: #000; margin-top: 8px; border-radius: 50%; }

.out { width: 120px; height: 120px; margin: 60px auto; border-top-color: #000; -webkit-animation: outerSignal 3s infinite linear; animation: outerSignal 3s infinite linear; margin-bottom: 0px; }

.middle { width: 90px; height: 90px; margin: 10px auto; border-top-color: #000; -webkit-animation: middleSignal 3s infinite linear; animation: middleSignal 3s infinite linear; }

.in { width: 60px; height: 60px; margin: 10px auto; border-top-color: #000; -webkit-animation: innerSignal 3s infinite linear; animation: innerSignal 3s infinite linear; }

@keyframes "innerSignal" { 0% { border-top-color: transparent; }
  25% { border-top-color: #000; }
  75% { border-top-color: #000; }
  100% { border-top-color: #000; } }
@keyframes "middleSignal" { 0% { border-top-color: transparent; }
  25% { border-top-color: transparent; }
  75% { border-top-color: #000; }
  100% { border-top-color: #000; } }
@keyframes "outerSignal" { 0% { border-top-color: transparent; }
  25% { border-top-color: transparent; }
  75% { border-top-color: transparent; }
  100% { border-top-color: #000; } }
@-webkit-keyframes "innerSignal" { 0% { border-top-color: transparent; }
  25% { border-top-color: #000; }
  75% { border-top-color: #000; }
  100% { border-top-color: #000; } }
@-webkit-keyframes "middleSignal" { 0% { border-top-color: transparent; }
  25% { border-top-color: transparent; }
  75% { border-top-color: #000; }
  100% { border-top-color: #000; } }
@-webkit-keyframes "outerSignal" { 0% { border-top-color: transparent; }
  25% { border-top-color: transparent; }
  75% { border-top-color: transparent; }
  100% { border-top-color: #000; } }
.dot1 { height: 30px; width: 30px; background: #fff; margin-top: 8px; border-radius: 50%; }

.out1 { width: 120px; height: 120px; margin: 60px auto; border-top-color: #fff; -webkit-animation: bout 3s infinite linear; animation: bout 3s infinite linear; }

.middle1 { width: 90px; height: 90px; margin: 10px auto; border-top-color: #fff; -webkit-animation: bmin 3s infinite linear; animation: bmin 3s infinite linear; }

.in1 { width: 60px; height: 60px; margin: 10px auto; border-top-color: #fff; -webkit-animation: bin 3s infinite linear; animation: bin 3s infinite linear; }

@keyframes "bin" { 0% { border-top-color: transparent; }
  25% { border-top-color: #fff; }
  75% { border-top-color: #fff; }
  100% { border-top-color: #fff; } }
@keyframes "bmid" { 0% { border-top-color: transparent; }
  25% { border-top-color: transparent; }
  75% { border-top-color: #fff; }
  100% { border-top-color: #fff; } }
@keyframes "bout" { 0% { border-top-color: transparent; }
  25% { border-top-color: transparent; }
  75% { border-top-color: transparent; }
  100% { border-top-color: #fff; } }
@-webkit-keyframes "bin" { 0% { border-top-color: transparent; }
  25% { border-top-color: #fff; }
  75% { border-top-color: #fff; }
  100% { border-top-color: #fff; } }
@-webkit-keyframes "bmid" { 0% { border-top-color: transparent; }
  25% { border-top-color: transparent; }
  75% { border-top-color: #fff; }
  100% { border-top-color: #fff; } }
@-webkit-keyframes "bout" { 0% { border-top-color: transparent; }
  25% { border-top-color: transparent; }
  75% { border-top-color: transparent; }
  100% { border-top-color: #fff; } }
